

<<!DOCTYPE html>
<html>
<head>
	<meta charset="UTf-8">
	<title>人物跑动画面</title>
	<style type="text/css">
		 body{
		                background-color: black;//设置背景颜色
		            }
		.im{
			position: absolute;
			top:400px;
			left:800px;
			width: 60px;
			height: 60px;
		}

		div{
			border: solid 2px red;
			position: absolute;
			left:1000px;
			top:40px;
			width:250px;
			height: 150px;
			padding-left: 5px;
		}

		li{
			list-style-type:none;
		}

		input{
			
			height: 30px;
			width: 40px;
		}
		
		.zhong_left,.zhong_stop,.zhong_right{
			display: inline;
		}

		input:hover{
			background-color:blue;
		}

		ul.first_ul > li{
			
			background-color: yellow;
			padding: 5px 10px;
		}

		.first_ul{
			padding: 0px 5px;
		}
		
		.a_top,.a_down{
			margin: 0px 85px;
		}

	</style>
</head>
<body>
	<img class="im" src="img/player_left.gif" style="width:200px;height:150px;"/>
	<div>
		<ul class="first_ul">
			<li class="li_fl">
				<input class="a_top" type="submit" value="上"/> 
			</li>

			<li>
				<ul>
					<li class="zhong_left">
						<input class="a_left" type="submit" value="左" />
					</li>
					<li class="zhong_stop">
						<input class="a_stop" type="submit" value="停止" />
					</li>
					<li class="zhong_right">
						<input class="a_right" type="submit" value="右" />
					</li>
			    </ul>
			</li>

			<li>
				<input class="a_down" type="submit" value="下" />	
			</li>
		</ul>
	</div>
	<script src="jquery-1.10.2.js"></script>
	<script>
		$(document).ready(function(){
			var flag = 4; //标志停下来的人物的样子
			var i = 0;
			var left_go =0;
			var top_go = 0;
			var clear = null;
			
			$(".a_stop").on("click",function(){
				i = 0;
				switch(flag)
				{
					case 1:$(".im").attr("src","img/" + "left" + "-" + i +".png");break;
					case 2:$(".im").attr("src","img/" + "right" + "-" + i +".png");break;
					case 3:$(".im").attr("src","img/" + "up" + "-" + i +".png");break;
					case 4:$(".im").attr("src","img/" + "down" + "-" + i +".png");break;
				}
				clearInterval(clear);
			});

			$(".a_left").on("click",function(){
				i=0;
				flag = 1;
				clearInterval(clear);
				$(".im").attr("src","img/" + "left" + "-" + i +".png");
				clear = setInterval(function(){
					if(++i == 4)
						i = 1;
					$(".im").attr("src","img/" + "left" + "-" + i +".png");
					var m= $(".im").offset().left -6 + "px";
					$(".im").css("left",m);
				},200);
			});


			$(".a_right").on("click",function(){
				i=0;
				flag = 2;
				$(".im").attr("src","img/" + "right" + "-" + i +".png");
				clearInterval(clear);
				clear = setInterval(function(){
					if(++i == 4)
						i = 1;
					$(".im").attr("src","img/" + "right" + "-" + i +".png");
					var m= $(".im").offset().left + 6 +"px";
					$(".im").css("left",m);
				},200);
			});

			$(".a_top").on("click",function(){
				i=0;
				flag = 3;
				$(".im").attr("src","img/" + "up" + "-" + i +".png");
				clearInterval(clear);
				clear = setInterval(function(){
					if(++i == 4)
						i = 1;
					$(".im").attr("src","img/" + "up" + "-" + i +".png");
					var m= $(".im").offset().top - 6 +"px";
					$(".im").css("top",m);
				},200);
			});

			$(".a_down").on("click",function(){
				i=0;
				flag = 4;
				$(".im").attr("src","img/" + "down" + "-" + i +".png");
				clearInterval(clear);
				clear = setInterval(function(){
					if(++i == 4)
						i = 1;
					$(".im").attr("src","img/" + "down" + "-" + i +".png");
					var m= $(".im").offset().top + 6 +"px";
					$(".im").css("top",m);
				},200);
			});

		});
	</script>
</body>
</html>